<template>
  <div class="myorder">
    <div class="top">
      <van-nav-bar
        title="我的订单"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <Bg>
      <div class="title">
        <div @click="cutover('all')">
          <span :class="title === 'all' ? 'active' : ''">全部</span>
        </div>
        <div @click="cutover('ing')">
          <span :class="title === 'ing' ? 'active' : ''">进行中</span>
        </div>
        <div @click="cutover('ed')">
          <span :class="title === 'ed' ? 'active' : ''">已完成</span>
        </div>
      </div>
    </Bg>
    <div v-if="orderArr.length > 0">
      <div class="finish-box" v-for="(v1, i1) in orderArr" :key="i1">
        <div class="finish-top">
          <div class="left">{{ v1.oid }}</div>
          <div class="right">
            <span @click="confirm(v1, i1)" v-show="v1.status == 1"
              >确认收获</span
            >
            <span v-show="v1.status == 2">已完成</span>
            <van-icon
              name="delete-o"
              @click="deleOrder(v1.oid, i1)"
              size="16"
              v-show="v1.status == 2"
            />
          </div>
        </div>
        <div class="order-box">
          <div class="order-info">
            <Orderitem
              v-for="(v2, i2) in v1.data"
              :key="i2"
              :product="v2"
            ></Orderitem>
          </div>
          <div class="bottom" v-show="v1.status == 2">
            <div>{{ v1.proInfo.date | formatDate("yyyy-MM-dd hh:mm:ss") }}</div>
            <div class="info">
              <div class="num">共计 {{ v1.proInfo.count }} 件</div>
              <div class="sum">合计 ￥{{ v1.proInfo.total }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <van-empty description="没有该状态的订单" />
    </div>
  </div>
</template>

<script>
import "../assets/less/myorder.less";
import Bg from "../components/Bg.vue";
import Orderitem from "../components/Orderitem.vue";
export default {
  name: "Myorder",
  components: {
    Bg,
    Orderitem,
  },
  data() {
    return {
      // 订单数据
      orderArr: [],
      // 状态
      title: "all",
      // 订单状态
      status: 0,
    };
  },

  created() {
    // 查询订单状态
    this.inquireOrderStatus(0);
  },
  methods: {
    // 返回
    onClickLeft() {
      this.$router.go(-1);
      // this.$router.push({ path: "/" });
    },

    // 查询订单状态
    inquireOrderStatus(status) {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "get",
        url: this.baseUrl + "/findOrder",
        params: {
          appkey: this.appkey,
          tokenString: tokenString,
          status: status,
        },
      })
        .then((result) => {
          console.log(result);
          this.$toast.clear();
          if (result.data.code == 700) {
            return this.$router.push({ name: "Login" });
          }
          if (result.data.code === 70000) {
            let products = [];
            let oids = [];
            //  找oid
            result.data.result.forEach((v) => {
              v.small_img = v.smallImg;
              v.updated_at = v.updatedAt;

              if (oids.indexOf(v.oid) === -1) {
                let o = {
                  oid: v.oid,
                  status: v.status,
                  proInfo: {
                    date: v.updated_at,
                    count: 0,
                    total: 0,
                  },
                  data: [],
                };
                oids.push(v.oid);
                products.push(o);
              }
            });

            // 通过oid查找对应的订单商品
            products.forEach((value) => {
              result.data.result.forEach((item) => {
                if (value.oid === item.oid) {
                  value.data.push(item);
                  value.proInfo.count += item.count;
                  value.proInfo.total += item.count * item.price;
                }
              });
            });

            this.orderArr = products;
            console.log("orderArr ===>", this.orderArr);
          } else {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

    // 点击切换
    cutover(val) {
      this.title = val;
      this.orderArr = [];
      if (val === "all") {
        this.inquireOrderStatus(0);
        this.status = 0;
        console.log(this.orderArr);
      } else if (val === "ing") {
        this.inquireOrderStatus(1);
        this.status = 1;
        console.log(this.orderArr);
      } else if (val === "ed") {
        this.inquireOrderStatus(2);
        this.status = 2;
        console.log(this.orderArr);
      }
    },

    // 确认收获
    confirm(item, index) {
      console.log("oid==>", item, index);
      let tokenString = this.$cookies.get("tokenString");

      //当用户未登录的时候跳转到登录页面
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "post",
        url: this.baseUrl + "/receive",
        data: {
          appkey: this.appkey,
          tokenString: tokenString,
          oid: item.oid,
        },
      })
        .then((result) => {
          console.log(result);
          this.$toast.clear();
          if (result.data.code === 700) {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }
          if (result.data.code === 80000) {
            item.status = 2;
            if (this.title == "ing") {
              this.orderArr.splice(index, 1);
            }
          } else {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

    // 删除订单
    deleOrder(oid, index) {
      let tokenString = this.$cookies.get("tokenString");

      //当用户未登录的时候跳转到登录页面
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "post",
        url: this.baseUrl + "/removeOrder",
        data: {
          appkey: this.appkey,
          tokenString: tokenString,
          oid: oid,
        },
      })
        .then((result) => {
          console.log(result);
          this.$toast.clear();
          if (result.data.code === 700) {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }
          if (result.data.code === 90000) {
            this.orderArr.splice(index, 1);
          } else {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },
  },
};
</script>
